<template>
  <div class="c-bg-sgray">
    <div class="c-mb10 c-ph24 c-textAlign-c c-bg-white c-fc-xblack c-fs28 c-pv30 c-fw700 shadom-div c-text-ellipsis1 c-text-hidden" v-if="companyAuth.enableDeclareModule == 0" @click="goToThemeDetail">{{themeName}}</div>
    <div class="c-bg-white c-ph24 c-pt30 c-mb10" v-for="(item, index) in dataList" :key="index">
      <div class="c-flex-row c-justify-sb c-fs22  c-bd-bd1-ccc" @click="goToSectionDetail(item.rtId, item.rsId, item.reId, item.status, 1)">
        <div class="c-fc-gray c-fs20 c-w0 c-flex-grow1" :class="{'c-fs20': companyAuth.enableDeclareModule == 1, 'c-fs22': companyAuth.enableDeclareModule == 0, 'c-opacity50': item.status == -2}">
          <div class="c-fs24 c-fc-xblack c-ww-bw c-ww-ba c-text-ellipsis1 c-pb20 c-text-hidden" v-if="companyAuth.enableDeclareModule == 1">{{item.themeName}}</div>
          <div class="c-pb20 c-fc-xblack c-flex-row c-aligni-center" @click="goToSectionDetail(item.rtId, item.rsId, item.reId, item.status, 2)">
            <div class="c-pr10 c-text-ellipsis1">{{companyAuth.enableDeclareModule == 1 ? '场次名称' : '专场'}}：{{item.sessionName}}</div><span class="iconfont c-fs12 c-fc-xblack" v-if="companyAuth.enableDeclareModule == 1">&#xe85a;</span>
          </div>
          <div class="c-pb20" v-if="item.reservationMode == 2">{{companyAuth.enableDeclareModule == 1 ? '课程时间' : '时间'}}：{{item.startAt?item.startAt.substr(0,16):item.startAt}} 至 {{item.endAt?item.endAt.substr(0,16):item.endAt}}</div>
          <div class="c-pb20" v-if="item.reservationMode == 1">预约时间：{{item.enrollTime}}</div>
          <div class="c-pb20">{{companyAuth.enableDeclareModule == 1 ? '上课地点' : '地点'}}：{{item.place}}</div>
        </div>
        <div>
          <!--1 已完成 -->
          <span v-if="item.status == 1" class="iconfont c-fs100 c-fc-xblue">&#xe856;</span>
          <!--2 进行中 待参与 -->
          <span v-else-if="item.status == 2" class="iconfont c-fs100 c-fc-sorange">&#xe855;</span>
          <!--3 已结束 -->
          <span v-else-if="item.status == 3" class="iconfont c-fs100 c-fc-gray">&#xe857;</span>
          <!--负2 已作废 -->
          <span v-else-if="item.status == -2" class="iconfont c-fs100 c-fc-gray">&#xe85e;</span>
          <!-- 负3 已取消 -->
          <span v-else-if="item.status == -3" class="iconfont c-fs100 c-fc-gray">&#xe907;</span>
        </div>
      </div>
      <div class="c-flex-row c-justify-sb c-pv24 c-aligni-center" :class="item.status == -2 ? 'c-opacity50' : ''">
        <div class="c-fc-gray " :class="companyAuth.enableDeclareModule == 1 ? 'c-fs20' : 'c-fs22'">提交时间：{{item.createdAt?item.createdAt.substr(0,16):item.createdAt}}</div>
        <span class="theme-fc c-fs22 c-fc-white" v-if="item.status > 0" @click="linkToTicketNum(item.rtId, item.reId, item.status)">查看票券</span>
      </div>
    </div>

    <div class="c-fc-gray c-fs22 c-textAlign-c c-pv20" v-if="(isLoading || loadingStatus == 'NO_MORE_DATA') && !noneShow">{{loadingStatus == 'NO_MORE_DATA' ? '我是有底线的' : '加载中...'}}</div>
    <loading-status-tem :noData="noneShow" :noDataText="'暂无您的约课信息'">
      <div class="c-fc-white c-lh c-fs32 c-mh24 c-pv28 c-textAlign-c c-br10 c-mt64 theme-bg" @click="goToDetail">立即约课</div>
    </loading-status-tem>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'myReservation',
  components: { loadingStatusTem },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      noneShow: true,
      pageIndex: 1,
      pageSize: 10,
      loadingStatus: "NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      isLoading: false,
      dataList: [],
      recentRtId: null, // 最新的rtId, 每月可点立即约课用到
      rtId: '',
      orderId: '',
      themeName: ''
    }
  },
  methods: {
    goToDetail() {
      // 点击立即约课
      this.$routerGo(this, "push", {
        path: "/homePage/reservation/reservationList"
      });
    },
    getMyReservationList() { // 获取我的约课
      if (!this.isLoading) {
        this.isLoading = true;
        // this.loadingStatus = 'LOADING';
        let $this = this;
        utilJs.getMethod(global.apiurl + 'reservations/getEnrollByUser?page=' + this.pageIndex + '&limit=' + this.pageSize + '&rtId=' + this.rtId + '&orderId=' + this.orderId,
          function (res) {
            $this.recentRtId = res.rtId;
            $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
            if ($this.pageIndex == 0) {
              $this.dataList = res.data.data;
            } else {
              $this.dataList = [...$this.dataList, ...res.data.data];
            }
            if ($this.dataList.length == 0) {
              $this.noneShow = true;
              $this.loadingStatus = "NO_MORE_DATA";
            } else {
              $this.themeName = $this.dataList[0].themeName
              $this.noneShow = false;
            }
            if ($this.dataList.length >= res.data.total) {
              $this.loadingStatus = "NO_MORE_DATA";
            } else {
              $this.loadingStatus = 'LOAD_MORE';
              $this.pageIndex++
            }
            $this.isLoading = false;
          }
        );
      }
    },
    linkToTicketNum(rtId, reId, status) { // 点击查看票券 status == -2 已作废不可跳转
      if (status == -2) {
        return;
      }
      this.$routerGo(this, "push", {
        path: "/activity/ticketNum",
        query: { activityId: rtId, from: 'reservation', reId: reId }
      });
    },
    goToThemeDetail() {
      this.$routerGo(this, "push", {
        path: "/activity/activityDetail",
        query: { ActivityNo: this.rtId, from: 'reservation' }
      });
    },
    goToSectionDetail(rtId, rsId, reId, status, type) { // 跳转场次详情status == -2 已作废不可跳转
      if (type == 1 && this.companyAuth.enableDeclareModule == 1) {
        return
      }
      if (status == -2) {
        return;
      }
      this.$routerGo(this, "push", {
        path: "/activity/activityDetail",
        query: { ActivityNo: rtId, from: 'sectionInfo', rsId: rsId, rpId: '' }
      });
    },
    // goToReservationDetail(rtId, reId) {
    //   this.$routerGo(this, "push", {
    //     path: "/activity/activityDetail",
    //     query: { ActivityNo: rtId, from: 'reservation', reId: reId }
    //   });
    // },
    //分享
    wechatShare: function () {
      let title = window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.getMyReservationList();
        }
      });
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("预约记录");// eslint-disable-line
    this.rtId = this.$route.query.rtId || '' // 我的约课带过来的，聚尚美没有
    this.orderId = this.$route.query.orderId || '' // 我的约课带过来的，聚尚美没有
    this.themeName = this.$route.query.themeName || '' // 我的约课带过来的，聚尚美没有
    this.dataList = [];
    this.pageIndex = 1;
    this.isLoading = false;
    this.getMyReservationList();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.shadom-div{
  box-shadow:0px 2px 6px 0px rgba(153,153,153,0.1);
}
</style>
